.run-result-view-details {
  user-select: none;
  flex: 1; // Use flex instead of height: 100%
  min-height: 0; // Allow flex children to shrink
  display: flex;
  flex-direction: column;

  .result-header {
    display: flex;
    align-items: center;
    gap: var(--space-8, 24px);
    padding: var(--space-4, 8px) var(--space-6, 16px);
    flex-shrink: 0; // Prevent header from shrinking

    .run-metric {
      flex-shrink: 0;
      font-size: var(--requestly-font-size-sm, 12px);
      font-style: normal;
      font-weight: 400;
      line-height: 18px; /* 150% */

      .label {
        margin-right: 2px;
        color: var(--requestly-color-text-subtle, #bbb);
      }

      .value {
        color: var(--requestly-color-text-default, #fff);
      }
    }
  }

  .result-tabs-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; // Allows flex child to shrink
    overflow: hidden; // Prevent content from overflowing

    .ant-tabs {
      height: 100%;
      display: flex;
      flex-direction: column;

      .ant-tabs-nav-wrap {
        display: flex;
        padding: var(--space-4, 8px) 0;
        align-items: center;
        gap: var(--space-4, 8px);
        align-self: stretch;
        flex-shrink: 0; // Prevent nav from shrinking

        .ant-tabs-nav-list {
          margin-left: 16px;
        }
      }

      .ant-tabs-nav-list {
        .ant-tabs-tab {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: var(--space-2, 4px);
          height: 24px;
          padding: var(--space-2, 4px) var(--space-3, 6px);

          &.ant-tabs-tab-active {
            border-radius: 4px;
            background: var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));
          }
        }

        .ant-tabs-tab + .ant-tabs-tab {
          margin-left: 4px;
        }
      }

      // Ensure content area uses flex layout
      .ant-tabs-content-holder {
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }

      .ant-tabs-content {
        height: 100%;
      }

      .ant-tabs-tabpane {
        height: 100%;
      }
    }

    .ant-tabs-ink-bar {
      display: none;
    }

    .test-result-tab-title {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--space-2, 4px);

      .title {
        color: var(--requestly-color-text-default, #fff);
        font-size: var(--requestly-font-size-xs, 11px);
        font-style: normal;
        font-weight: 500;
        line-height: 17px; /* 154.545% */
      }

      .ant-badge {
        .ant-badge-count {
          display: flex;
          justify-content: center;
          align-items: center;
          min-width: 24px;
          padding: var(--space-1, 2px) var(--space-2, 4px);

          border-radius: 29px;
          background: var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));
          box-shadow: none;

          font-size: var(--requestly-font-size-xs, 11px);
          font-style: normal;
          font-weight: 400;
          line-height: 17px; /* 154.545% */

          .ant-scroll-number-only {
            height: auto;
          }
        }
      }
    }

    .test-result-collapse-container {
      padding-bottom: 0;
      margin-top: 0;

      .ant-collapse {
        background: transparent;
        border: none;

        &.test-result-collapse {
          margin-bottom: 2px;
        }

        .ant-collapse-item {
          border: none;
        }

        .ant-collapse-expand-icon {
          width: 12px;

          svg {
            margin-right: 0;
          }
        }

        .collapse-expand-icon {
          transition: transform 0.2s ease-out;

          &.expanded {
            transform: rotate(90deg);
          }
        }

        .ant-collapse-header {
          display: flex;
          padding: var(--space-3, 6px);
          align-items: center;
          gap: var(--space-4, 8px);
          align-self: stretch;

          color: var(--requestly-color-text-subtle, #bbb);
          font-size: var(--requestly-font-size-2xs, 9px);
          font-style: normal;
          font-weight: 500;
          line-height: 13px; /* 144.444% */
          letter-spacing: 1px;
          text-transform: uppercase;

          border-radius: 0;
          background: var(--requestly-color-surface-0, #212121);
        }

        .ant-collapse-content {
          border: none;
          background: transparent;
        }

        .ant-collapse-content-box {
          padding: 0;
        }
      }
    }

    .tests-results-view-container {
      height: 100%;
      overflow-y: auto;

      .test-details-container {
        display: flex;
        padding: var(--space-5, 12px);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: var(--space-4, 8px);
        align-self: stretch;
        border-bottom: 1px solid var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));

        .execution-error-message {
          display: flex;
          align-items: center;
          gap: var(--space-3, 6px);
          color: var(--requestly-color-error-text, #ff8080);

          svg {
            flex-shrink: 0;

            --size: 12px;
            width: var(--size);
            height: var(--size);
          }

          .message {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            overflow: hidden;

            text-overflow: ellipsis;

            font-size: var(--requestly-font-size-sm, 12px);
            font-style: normal;
            font-weight: 400;
            line-height: 18px; /* 150% */
          }
        }

        .no-test-found-message {
          font-weight: 400;
          color: var(--requestly-color-text-subtle);
          font-size: var(--requestly-font-size-sm);
        }

        .loader {
          display: flex;
          align-items: center;
          gap: var(--space-6, 16px);
          align-self: stretch;

          .running-message {
            color: var(--requestly-color-text-placeholder, #8f8f8f);
            font-size: var(--requestly-font-size-sm);
            font-style: italic;
            font-weight: 400;
            line-height: 17px; /* 154.545% */
          }
        }

        .request-details {
          display: flex;
          align-items: center;
          gap: 4px;

          .icon {
            margin-right: 4px;
            display: flex;
            align-items: center;
            flex-shrink: 0;
            margin-top: -1px;
          }

          svg.graphql-request-icon {
            width: 16px;
            min-width: 16px;
          }

          .request-method {
            background-color: transparent !important;
            font-size: var(--requestly-font-size-2xs, 9px);
            font-style: normal;
            font-weight: 600;
            line-height: 13px; /* 144.444% */
            letter-spacing: 1.5px;
            text-transform: uppercase;
          }

          .collection-name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            overflow: hidden;
            color: var(--requestly-color-text-placeholder, #8f8f8f);
            text-overflow: ellipsis;
            font-size: var(--requestly-font-size-xs, 11px);
            font-style: normal;
            font-weight: 500;
            line-height: 17px; /* 154.545% */
          }

          .request-name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--requestly-color-text-default, #fff);
            font-size: var(--requestly-font-size-sm, 12px);
            font-style: normal;
            font-weight: 500;
            line-height: 17px; /* 150% */
            margin-right: 4px;
            cursor: pointer;
          }

          .response-details {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--requestly-color-text-placeholder, #8f8f8f);
            font-size: var(--requestly-font-size-xs, 11px);
            margin-bottom: -2px;
          }

          .response-time {
            margin-right: 4px;
            color: var(--requestly-color-text-placeholder, #8f8f8f);
            font-size: var(--requestly-font-size-xs, 11px);
            font-style: normal;
            font-weight: 400;
            line-height: 17px; /* 154.545% */
          }
        }

        .results-list {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: var(--space-3, 6px);
          align-self: stretch;
        }
      }

      .test-result-item {
        display: flex;
        align-items: center;
        gap: 8px;

        &-status-badge {
          font-size: var(--requestly-font-size-2xs);
          padding: var(--space-1, 2px) var(--space-2, 4px);
          border-radius: 4px;
          letter-spacing: 1px;
          font-weight: 500;
          display: flex;
          align-items: center;
          gap: 4px;

          svg {
            width: 14px;
            height: 14px;
          }

          &.passed {
            color: var(--requestly-color-success-200);
            background-color: var(--requestly-color-success-800);
          }

          &.failed {
            color: var(--requestly-color-error-text);
            background-color: var(--requestly-color-error-800);
          }

          &.skipped {
            color: var(--requestly-color-text-subtle);
            background-color: var(--requestly-color-surface-2);
          }
        }

        &-message {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          line-clamp: 1;

          overflow: hidden;
          color: var(--requestly-color-text-subtle);
          text-overflow: ellipsis;
          flex: 1 0 0;
          font-size: var(--requestly-font-size-sm);
        }
      }
    }
  }
}
